
<template>
  <div div class="content">
    <div class="divheader">  <footer-nav v-bind:class="{ isManage: isNowPage }"></footer-nav></div>
    <div class="divcontent">
      <button v-on:click="add">新增</button>

      <div v-show="showAdd" class="divAdd">
        <div class="file_box">
          <div class="upload">
            <input
              type="file"
              id=""
              value=""
              name="saveFile"
              v-on:change="tirggerFile($event)"
            />
            <img :src="form.imgURL" alt="" />
            <!-- <i v-show="!form.img">添加图片</i> -->
          </div>
          <!-- <i class="title_dec" style="position: absolute; left: 4rem; top: 3rem"
            >您可以上传1张图片</i
          > -->
        </div>
        <!-- <img style="max-height: 100px" v-bind:src="userimg" /> -->

        <input type="text" placeholder="请输入姓名" v-model="name" />

        <input type="password" placeholder="密码" v-model="password" />
        <input type="password" placeholder="确认密码" v-model="password2" />

        <input type="email" placeholder="邮箱" v-model="email" />
        <input type="tel" placeholder="电话" v-model="phonenumber" />
        <button v-on:click="save">确定</button>
        <button v-on:click="cancel">取消</button>
      </div>

      <table>
        <tr>
          <th>照片</th>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>电话</th>
          <th>操作</th>
          <!-- <th>姓名</th>
        <th>年龄</th>
        <th>操作</th> -->
        </tr>
        <tr v-for="(item, index) in users" :key="index">
          <!-- {"id":82,"name":"szq222","password":"szq222","email":"szq@qq.com","phonenumber":"18136392373","userimg":"/upload/user.png"}, -->
          <td><img :src="getimgurl(item)" style="width:80px;height:auto;" alt="" /> </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>{{ item.phonenumber }}</td>
          <td v-bind:id="index">
            <button v-on:click="eidt">编辑</button>
            <button v-on:click="deleteuser">删除</button>
          </td>
        </tr>
      </table>
    </div>
    <div class="divfooter">
      <footer-nav v-bind:class="{ isManage: isNowPage }"></footer-nav>
    </div>
  </div>
</template>
      <script>
import FooterNav from "../../components/footer.vue";
import Vue from "vue";
//  imgUrl:require( './../../assets/logo.png');

import defaultimg from "../../assets/add.png";
import common from "../../common/common.vue";

export default {
  components: {
    FooterNav,
  },
  data() {
    return {
      // {"id":82,"name":"szq222","password":"szq222","email":"szq@qq.com","phonenumber":"18136392373","userimg":"/upload/user.png"}

      id: 0,
      name: "",
      password: "",
      password2: "",
      email: "",
      phonenumber: "",
      userimg: defaultimg,

      form: {
        imgURL:defaultimg
      },

      userIndex: -1, //选中的用户索引 (-1:表示未选中)
      showAdd: false,
      isNowPage: true,
      users: [
        // { name: "强哥1", password: "21" },
        // { name: "强哥2", password: "31" },
        // { name: "强哥3", password: "32" },
      ],
    };
  },
  created: function () {
    this.getAllUserList();
    //alert(common.serverRootUrl);
  },
  mounted() {},
  methods: {
    getimgurl(item){

      return  common.serverRootUrl + item.userimg;
    },
   
    // 上传
    tirggerFile(event) {
      let self = this;
      let file = event.target.files[0];
      let param = new FormData(); // 创建form对象
      param.append("files", file, file.name); // 通过append向form对象添加数据
      param.append("type", "1"); // 添加form表单中其他数据
      console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      // 添加请求头
      this.$axios
        .post("/api/file/fileUpload", param, config)
        .then((response) => {
          if (response.status == 200  && response.data.result == "success") {
           self.form.imgURL= common.serverRootUrl + response.data.imgUrl;
           self.userimg= response.data.imgUrl;
          //  alert(self.form.imgURL);
            // self.form.img = response.data.data.img;
            // self.form.imgURL  ='http://www.baidu.com/'+response.data.data.img;
          }
        });
    },
    // 查询所有
    getAllUserList() {
      // /api 在\config\index.js proxyTable中被配置
      this.$axios
        .get(common.serverRootUrl + "/user/getAllUserList")
        .then((res) => {
          console.log("加载客户列表..." + res.data);
          this.users = res.data;
          console.log("success===>" + JSON.stringify(res));
        })
        .catch((error) => {
          console.log("error====>" + JSON.stringify(error));
        });
    },
    //   添加
    add: function () {
      this.userIndex = -1;
      this.showAdd = true;

      this.id = -1;
      this.name = "";
      this.password = "";
      this.password2 = "";

      this.name = "";
      this.password = "";
      this.email = "";
      this.phonenumber = "";
      this.userimg = "";
      this.form.imgURL= defaultimg;

    }, // 编辑
    eidt(e) {
      this.userIndex = Number(e.target.offsetParent.id);
      var id = this.userIndex;
      this.showAdd = true;

      this.id = this.users[id].id;
      this.name = this.users[id].name;
      this.password = this.users[id].password;
      this.password2 = this.users[id].password;
      this.email = this.users[id].email;
      this.phonenumber = this.users[id].phonenumber;

      this.form.imgURL= common.serverRootUrl + this.users[id].userimg;
      this.userimg = this.users[id].userimg;
      
   

    },
    // 删除
    deleteuser(e) {
      this.userIndex = Number(e.target.offsetParent.id);
      var id = this.userIndex;
      var that = this;
      var user = this.users[id];
      var url;
      var data;
      url = "/api/user/delete";
      // 使用 sq 插件对 axios 中 json 数据进行转换
      data = that.$qs.stringify(user);
      this.$axios
        .post(url, data)
        .then((response) => {
          if (response != null && response.data.result == "success") {
            this.users.splice(id, 1);
          }
          alert(response.data.message);
        })
        .catch((error) => {
          alert("error====>" + JSON.stringify(error));
        });

      // Vue.delete( this.users, id);
      this.userIndex = -1;
    },
    // 保存
    save() {
      var that = this;
      var user = {};
      user.id = this.id;
      user.name = this.name;
      user.password = this.password;
      user.email = this.email;
      user.phonenumber = this.phonenumber;
      user.userimg = this.userimg;

      var url;
      var data;
      if (that.userIndex == -1) {
        // 添加保存
        url = "/api/user/addSaveUserData";
        data = that.$qs.stringify({
          // 使用 sq 插件对 axios 中 json 数据进行转换
          name: user.name,
          password: user.password,
          email: user.email,
          phonenumber: user.phonenumber,
          userimg: user.userimg
        });
      } else {
        // 编辑保存
        url = "/api/user/updateSaveUserData";
        data = that.$qs.stringify({
          // 使用 sq 插件对 axios 中 json 数据进行转换
          id: user.id,
          name: user.name,
          password: user.password,
          email: user.email,
          phonenumber: user.phonenumber,
          userimg: user.userimg
        });
      }
      this.$axios
        .post(url, data)
        .then((response) => {
          if (that.userIndex == -1) {
            // 添加保存
            if (response != null && response.data.result == "success") {
              // this.getAllUserList();
              // that.users.unshift(user);
              this.getAllUserList();
              that.showAdd = false;
            }
          } else {
            // 编辑保存
            if (response != null && response.data.result == "success") {
              var id = that.userIndex;
              Vue.set(that.users, id, user);
              //  this.getAllUserList();
              that.showAdd = false;
            }
          }
          alert(response.data.message);
        })
        .catch((error) => {
          alert("error====>" + JSON.stringify(error));
        });
    },
    cancel(){
      this.showAdd=false;
    }
  },
};
</script>
<style scoped>
input {
  width: 200px;
  height: 30px;
}
table {
  width: 100%;
  border: black 1px solid;
  margin-top: 10px;
}
th,
td {
  border: black 1px solid;
}
button {
  width: 100px;
  height: 30px;
}
.divAdd {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 300px;
  overflow-y: auto;
}

/* 图片 */
.upload {
  width: 3rem;
  height: 3rem;
  background: #e5e5e5 url("../../assets/add.png") center center no-repeat;
  background-size: 3rem 3rem;
  position: relative;
}
.upload input {
  position: relative;
  width: 3rem;
  height: 3rem;
  z-index: 99999;
  top: 0;
  left: 0;
  opacity: 0;
}
.file_box img {
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 0;
  left: 0;
  border: 0.02rem solid #e5e5e5;
}
.upload i {
  position: absolute;
  bottom: 0.36rem;
  left: 0.72rem;
  color: #ffffff;
  font-size: 0.4rem;
}
</style>
